<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <style>
        ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
        li{list-style-type: none;margin: 5px;padding: 0;float: left;}
    </style>
    
    <button type="button" class="btn btn-success" id="add_img_btn">多图上传</button> 
    <ul id="upload_img_wrap"></ul> <!-- 加载编辑器的容器 --> <textarea id="uploadEditor" style="display: none;"></textarea> <!-- 使用ue --> <script type="text/javascript">
     
    // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。
 var uploadEditor = UE.getEditor("uploadEditor", {
        isShow: false,
        focus: false,
        enableAutoSave: false,
        autoSyncData: false,
        autoFloatEnabled:false,
        wordCount: false,
        sourceEditor: null,
        scaleEnabled:true,
        toolbars: [["insertimage", "attachment"]]
    });

    // 监听多图上传和上传附件组件的插入动作
    uploadEditor.ready(function () {
    	//在已经有图上传并且点击确认按钮的时候触发该监听器的处理方法
        uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
    });

    // 自定义按钮绑定触发多图上传和上传附件对话框事件
    document.getElementById('add_img_btn').onclick = function () {
        var dialog = uploadEditor.getDialog("insertimage");
        dialog.title = '多图上传';
        dialog.render();
        dialog.open();
    };

    //插入已上传图片的方法
    function _beforeInsertImage(t, result) {
    	    //获取到对应的相册id    
    	    var album_id=$("#album_id_hidden").val();
    	    //获取并保存所有上传图片的路径
    	    var images_path="";
    	    for(var i in result){
    	    	images_path=images_path+result[i].src+","
    	    }
    	    //需要将图片存至数据库中去
    	    //数据库中保存成功后重新跳转至该页面
    	    $.post(
    	       "/MyBlog/albumServlet",
    	       {"images":images_path,"albumId":album_id,"operation":"addImages"},
    	       function(data){
    	    	   if(data.flag){
    	    		   window.location.href="/MyBlog/albumServlet?operation=album_describ&album_id="+album_id
    	    	   }
    	       },
    	       "json"
    	    ) 
     //这里是将图片插入到htmlwen
        /* var imageHtml = '';
        for(var i in result){
            imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"></li>';
        }
        document.getElementById('upload_img_wrap').innerHTML = imageHtml;  */
    }
</script>
